/* ---- 公共样式变量 ---- */

/* 主题色 */
$theme-color: #165dff;
$theme-color-light: #d9bafe;
$theme-color-dark: #cc5b02;
$theme-color-bg: #fffbf7;

/* 边框 */
$border-radius: 4px;

// /* 字体大小 */
// $font-size-small: 24rpx;
// $font-size-base: 28rpx;
// $font-size-large: 36rpx;

// /* 除去页内边距的最大宽度 */
// $container-padding-width: 25rpx;
// $container-padding-height: 20rpx;
// $max-width: 750rpx - $container-padding-width * 2;

// /*  
//  * @Author: 廖耀华
//  * @Descrtion: 原子CSS
//  */
// /* 定义一个映射，包含想要生成的所有值 */
// $spacing-values: (
// 	'0': 0,
// 	'5': 5,
// 	'10': 10,
// 	'15': 15,
// 	'20': 20,
// 	'25': 25,
// 	'30': 30
// );

// /* 为padding和margin生成原子类 
//  * 例如 mr-5 => margin-right: 5rpx; pt-10 => padding-top: 10rpx;
//  */
// /* 单方向 */
// @each $property, $abbrev in (padding: 'p', margin: 'm') {
// 	@each $direction, $dirabbrev in (top: 't', right: 'r', bottom: 'b', left: 'l') {
// 		@each $class, $value in $spacing-values {
// 			.#{$abbrev}#{$dirabbrev}-#{$class} {
// 				#{$property}-#{$direction}: #{$value}rpx;
// 			}
// 		}
// 	}
// }

// // 四个方向
// @each $property, $abbrev in (padding: 'p', margin: 'm') {
// 	@each $class, $value in $spacing-values {
// 		.#{$abbrev}-#{$class} {
// 			#{$property}: #{$value}px;
// 		}
// 	}
// }

// /* ---- 公共样式组 ---- */
// .d-flex {
// 	display: flex;
// }

// /* 页面背景 */
// // page {
// // 	background: #f8f8f8;
// // }

// /* 页面公共样式 */
// .app-container {
// 	display: flex;
// 	flex-direction: column;
// 	align-items: center;
// 	padding: $container-padding-height $container-padding-width;
// 	color: #333;
// }

// .app-title {
// 	font-size: $font-size-large;
// 	font-weight: bold;
// 	color: #333;
// }

// .app-more {
// 	font-size: $font-size-base;
// 	font-weight: normal;
// 	color: $theme-color;
// }

// .app-content {
// 	font-size: $font-size-base;
// 	margin: 20rpx 0;
// 	color: #666;
// }

// .app-avatar {
// 	width: 60rpx;
// 	height: 60rpx;
// 	margin-right: 20rpx;
// 	border-radius: 100%;
// }

// .app-box {
// 	width: $max-width - 2 * 20rpx;
// 	border-radius: 30rpx;
// 	background-color: #fff;
// 	padding: 20rpx;
// 	margin: 20rpx 0;
// 	box-shadow: 0 3rpx 9rpx #eee;
// }
